<template>
  <el-container style="height: 100%">
    <el-header>
      <!--头部-->
      <Header></Header>
    </el-header>
    <br>
    <el-main class="register">
      <el-col :span="14" style="padding-top: 60px">
        <img src="../../assets/images/rigster.png">
      </el-col>
      <el-col :span="10">
        <!--  :rules="rules" 指向验证规则      -->
        <el-form ref="form"  :rules="rules" :model="form" label-width="80px" style="width:500px;padding:5px;background-color: white;border-radius: 5px">
          <h1 align="center">邮箱注册</h1>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email" style="width: 400px"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input show-password v-model="form.password" style="width: 400px"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="surePassword">
            <el-input show-password v-model="form.surePassword" style="width: 400px"></el-input>
          </el-form-item>

          <el-form-item label="验证码" prop="code" >
            <el-input v-model="form.code" style="width: 200px"></el-input>
            <el-button type="primary" @click="sendCode" :disabled="stopButton" style="width: 150px">发送验证码 {{num}}</el-button>
          </el-form-item>

          <el-form-item >
            <a href="#">用户协议</a>
            <el-checkbox v-model="isRead">我已阅读并接受《用户协议》</el-checkbox>
          </el-form-item>
          <el-form-item >
            <el-button type="primary" @click="onSubmit('form')" style="width: 350px">注册</el-button>
          </el-form-item>

        </el-form>
      </el-col>
    </el-main>
    <Footer></Footer>
  </el-container>
</template>

<script>
  import Header from "./myComponents/Header";

  import Footer from "./myComponents/Footer";



  export default {
    name: "RegisterEmail",
    components:{
      Header,
      Footer
    },
    data(){
      /*自定义表单验证：验证两次输入密码是否正确*/
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.form.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return{
        num:"",//倒计时，发送验证码按钮的倒计时
        stopButton:false,//是否禁用按钮，true：禁用，false:不禁用
        form: { //用户注册表单
          code: '',
          password: '',
          surePassword: '',
          email: '',

        },
        isRead:false,
        rules:{ //用户注册表单的验证规则
          password:[ //密码验证
            {required:true,message:"请输入密码",trigger:"blur"},//密码不能为空的验证
            { validator: validatePass, trigger: 'blur' },
            { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }//密码长度的验证
          ],
          surePassword:[ //确认密码验证
            {required:true,message:"请输入确认密码",trigger:"blur"},//确认密码不能为空的验证
            { validator: validatePass, trigger: 'blur' },
            { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }//确认密码长度的验证
          ],
          email:[ //邮箱验证
            {required:true,message:"请输入邮箱地址",trigger:"blur"},//邮箱不能为空的验证
            {type:"email",message:"请输入正确的邮箱",trigger:"blur"},//邮箱格式的验证
          ],


        }
      }
    },
    methods:{
      sendCode(){//发送验证码
        const self = this;
        //禁用按钮
        this.stopButton = true;
        //启动倒计时
        this.num = 60;
        var time =  setInterval(function () {
          self.num --;
            if(self.num==0){
              //清除倒计时
              clearInterval(time);
              //启动发送验证码按钮
              self.stopButton = false;
              //还原num初始值
              self.num = "";
            }
        },1000)
        //发送ajax
        this.$http.post("/user/getCode",{"email":this.form.email})
        .then(function (rs) {
           self.$message(rs.data.msg);
        })

      },
      onSubmit:function (formName){ //注册
        const self = this;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (!self.isRead){
              self.$alert("请勾选用户协议");
            }else{
              //发送ajax
              this.$http.post("/user/registerByEmail",this.form)
                .then(function (rs) {
                   if(rs.data.code==200){
                     self.$message(rs.data.msg);
                     //回到登录页面
                     self.$router.push("/");
                   }else{
                     self.$message(rs.data.msg);
                   }

                })


            }

          } else {
            self.$message({message:'请输入正确的信息!',type:"warning"});
            return false;
          }
        });
      }
    }

  }
</script>

<style scoped>
  .register{
    background-color: wheat;
    background-size: cover;
    background-repeat:no-repeat;
    overflow:hidden;
    height: 100%;
  }
</style>
